<template>
    <h2>理财信息修改页面</h2>
    <table class="table table-bordered">
        <tr>
            <td>理财产品名称</td>
            <td><input type="text" v-model="FinanInfo.F_name"></td>
        </tr>
        <tr>
            <td>年收益</td>
            <td><input type="text" v-model="FinanInfo.F_APY"></td>
        </tr>
        <tr>
            <td>最低金额</td>
            <td><input type="text" v-model="FinanInfo.F_MinMoney"></td>
        </tr>
        <tr>
            <td>风险等级</td>
            <td><input type="radio" value="0" v-model="FinanInfo.F_Level">低风险
                <input type="radio" value="1" v-model="FinanInfo.F_Level">中风险
                <input type="radio" value="2" v-model="FinanInfo.F_Level">高风险
            </td>
        </tr>
        <tr>
            <td>理财利率</td>
            <td>
                <select v-model="FinanInfo.I_Id">
                    <option value="0">--请选择--</option>
                    <option v-for="item in info" :value="item.I_Id">{{ item.I_Year }}年利率为{{ item.I_Interst }}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <button class="btn btn-success" @click="saveData">修改</button>
            </td>
        </tr>
    </table>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useRoute , useRouter} from 'vue-router';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';



//获取路由对象
const route = useRoute();
//获取路由对象
const router = useRouter();

//响应式数据
const FinanInfo = ref({
    F_name: '',
    F_APY: '',
    F_MinMoney: '',
    
    F_Level: 0,
    I_Id: 0
});


//创建响应式数据
const info = ref([
    {
        I_Id: 0,
        I_Year: '',
        I_Interst: ''
    }
]);


//创建声明周期函数钩
onMounted(() => {
    loadData();
    Detail();
});
const loadData = () => {
    axios.get("https://localhost:44387/api/Finans/ShowInterestInfor")
        .then(res => {
            console.log(res.data);
            info.value = res.data;

        })
        .catch(err => {
            console.log(err);
        })
};
const Detail = () => {
    axios.get("https://localhost:44387/api/Finans/Detail", {
        params: {
            F_id: route.query.F_id
        }
    })
        .then(res => {
            console.log(res.data);
            FinanInfo.value = res.data;

        })
        .catch(err => {
            console.log(err);
        })
};

//保存理财信息
const saveData = () => {
    //理财项目名称不能为空
    if (FinanInfo.value.F_name == '') {
        alert("理财项目名称不能为空");
        return;
    }
    //年收益不能为空
    if (FinanInfo.value.F_APY == '') {
        alert("年收益不能为空");
        return;
    }
    //最低金额不能为空
    if (FinanInfo.value.F_MinMoney == '') {
        alert("最低金额不能为空");
        return;
    }
    //判断最低金额需大于100元且小于1亿元
    if (Number(FinanInfo.value.F_MinMoney) <= 100 ||Number( FinanInfo.value.F_MinMoney) >= 100000000) {
        alert("最低金额需大于100元且小于1亿元");
        return;
    }
    
    axios.put("https://localhost:44387/api/Finans/Update", {
        F_id: route.query.F_id,
        F_name: FinanInfo.value.F_name,
        F_APY: FinanInfo.value.F_APY,
        F_MinMoney: FinanInfo.value.F_MinMoney,
        
        F_Level: FinanInfo.value.F_Level,
        I_Id: FinanInfo.value.I_Id
    })
        .then(res => {
            console.log(res.data);
            if (res.data > 0) {
                alert("理财信息修改成功");
                router.push("/ShowFinanInfo");
            }
            else {
                alert("理财信息修改失败");
            }

        })
        .catch(err => {
            console.log(err);
        })
};

</script>
